<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>DS_SaoDiSheng</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script src="lib/layui/layui.all.js" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
</head>

<body>

<div class="layui-fluid" id="workingArea">
    <form>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <label class="layui-form-label"><span class="x-red">*</span>寄件人:</label>
                        <div class="col-sm-6">
                            <select class="form-control" v-model="order.sid">
                                <option v-for="user in users" :value="user.id">
                                    名字：{{user.name}} 地址：{{user.address}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-card-body ">
                        <label class="layui-form-label"><span class="x-red">*</span>收件人:</label>
                        <div class="col-sm-6">
                            <select class="form-control" v-model="order.cid">
                                <option v-for="user in users" :value="user.id">
                                    名字：{{user.name}} 地址：{{user.address}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-card-body ">
                        <label class="layui-form-label"><span class="x-red">*</span>配送物流 :</label>
                        <div class="col-sm-6">
                            <select class="form-control" v-model="order.vid">
                                <option v-for="vehicle in vehicles" :value="vehicle.id">
                                    {{vehicle.name}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-card-body ">
                        <label class="layui-form-label"><span class="x-red">*</span>配送人员:</label>
                        <div class="col-sm-6">
                            <select class="form-control" v-model="order.staid">
                                <option v-for="staff in staffs" :value="staff.id">
                                    员工名字：{{staff.name}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-card-body ">
                        <label class="layui-form-label"><span class="x-red">*</span>请选择包裹:</label>
                        <div class="col-sm-6">
                            <select class="form-control" v-model="order.pid">
                                <option v-for="package in packages" :value="package.id">
                                    包裹名：{{package.name}} 包裹重量：{{package.weight}} 数量：{{package.quantity}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-card-body ">
                        <label class="layui-form-label"><span class="x-red">*</span>费用:</label>
                        <div class="col-sm-6">
                            <input type="text" id="freight" name="freight"  placeholder="请输入订单费用" v-model="order.freight"></div>
                        </div>
                    </div>
                <div>
                    <a href="#nowhere"  @click="add()" class="btn btn-success">添加</a>
                </div>
                </div>
            </div>
    </form>

</div>

</div>

</body>
<script>

    //判断数值是否为负数，为负数说明没有选择
    function checkDigit(value,text){

        if(value < 0){
            alert(text+ "不能为空");
            return false;
        }
        return true;
    }
    //确实是否要删除
    function checkDeleteLink(){
        var confirmDelete = confirm("确认要删除");
        if(confirmDelete)
            return true;
        return false;
    }

    //分页跳转函数，向前跳或者向后跳，或者跳转到第一页或者最后一页。
    function jump(page,vue){
        if('first'== page && !vue.pagination.first)
            vue.list(0);

        else if('pre'== page &&	vue.pagination.hasPrevious )
            vue.list(vue.pagination.number-1);

        else if('next'== page && vue.pagination.hasNext)
            vue.list(vue.pagination.number+1);

        else if('last'== page && !vue.pagination.last)
            vue.list(vue.pagination.totalPages-1);
    }
    //分页跳转函数，跳转到指定页
    function jumpByNumber(start,vue){
        if(start!=vue.pagination.number)
            vue.list(start);
    }


    $(function () {
        var data4Vue = {
            uri: 'foreorders',
            users: [],
            staffs: [],
            vehicles: [],
            packages: [],
            order: {sid: -1, cid: -1, vid: -1, staid: -1, pid: -1, freight: -1}
        };

        // ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () {
                this.load();
            },
            methods: {
                load: function () {
                    var url = this.uri;
                    axios.get(url).then(function (response) {
                        var result = response.data;
                        vue.users = result.data.users;
                        vue.staffs = result.data.staffs;
                        vue.vehicles = result.data.vehicles;
                        vue.packages = result.data.packages;
                    });
                },
                add: function () {
                    if(!checkDigit(this.order.sid, "寄件人"))
                        return;
                    if (!checkDigit(this.order.cid, "收件人"))
                        return;
                    if (!checkDigit(this.order.vid, "配送物流"))
                        return;
                    if (!checkDigit(this.order.staid, "配送人员"))
                        return;
                    if (!checkDigit(this.order.pid, "包裹"))
                        return;
                    if(!checkDigit(this.order.freight, "订单费用"))
                        return;
                    var url = this.uri;

                    axios.post(url, this.order).then(function (response) {
                        vue.order.sid = -1;
                        vue.order.cid = -1;
                        vue.order.vid = -1;
                        vue.order.staid = -1;
                        vue.order.pid = -1;
                        vue.order.freight = -1;
                    });
                },
            }
        });

    })
</script>

</html>